<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport">
    <title>p40pro+</title>

    <link rel='stylesheet' href='css/blink2.css'/>
    <link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'/>

    <script src="js/myCookie.js"></script> <!--cookie有问题-->
    <script src="js/jquery.min.js"></script>
    <script src="js/address.js"></script>
    <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>

    <style>
        a {
            text-decoration: none;
        }

        img {
            width: 400px;
            height: 400px;
        }
    </style>
</head>

<body>
<h1><a href="index.jsp" style="text-decoration:none;">&nbsp;华为商城</a>
    <small>&nbsp;手机HW124892343</small>
    <a href = "buycar.jsp" style = "text-decoration: none;"><small style = "color:blue;">&nbsp;购物车</small></a>
</h1>


<table style="margin-left:160px;">
    <tr>
        <td>
            <div id="myCarousel" class="carousel vertical slide" data-ride="carousel">
                <!-- 轮播（Carousel）指标 -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                    <li data-target="#myCarousel" data-slide-to="3"></li>
                    <li data-target="#myCarousel" data-slide-to="4"></li>
                    <li data-target="#myCarousel" data-slide-to="5"></li>
                </ol>
                <!-- 轮播（Carousel）项目 -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="imgs/p40/12.png" alt="First slide">
                    </div>
                    <div class="item">
                        <img src="imgs/p40/9.png" alt="First slide">
                    </div>
                    <div class="item">
                        <img src="imgs/p40/10.png" alt="First slide">
                    </div>
                    <div class="item">
                        <img src="imgs/p40/11.png" alt="First slide">
                    </div>
                    <div class="item">
                        <img src="imgs/p40/7.png" alt="First slide">
                    </div>
                    <div class="item">
                        <img src="imgs/p40/8.png" alt="First slide">
                    </div>
                </div>


                <!--轮播导航 左-->
                <a class="left carousel-control-sm" href="#myCarousel" role="button" data-slide="prev"
                   style="margin-left:176px;">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>

                &nbsp;&nbsp;&nbsp;
                <!--轮播导航 右-->
                <a class="right carousel-control-sm" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </td>
        <td>
            <form action="#" class="form-horizontal form-inline" role="form">
                <h2>&nbsp;&nbsp;HUAWEI P40 Pro+ 5G全网通 8GB+256GB (陶瓷白)</h2>
                <div class="box" style="font-size:15px;">麒麟990 5G SoC芯片，纳米微晶陶瓷工艺，5000万超感知徕卡五摄，100倍双目变焦，华为5G全网通旗舰手机</div>
                <pre style="font-size:15px;margin-left:6px;width:750px;height:90px;overflow:hidden;">
                               商品编号&nbsp;&nbsp;HW124892343
                               价格&nbsp;&nbsp;￥7988.00起
                               促销&nbsp;&nbsp;限时优惠￥100 ￥7888.00
                           </pre>
                <br>
                <div>
                    地区：<select id="area"></select>
                    省：<select id="cmbProvince"></select>
                    市：<select id="cmbCity"></select>
                    区：<select id="cmbArea"></select>
                    <br/><br/>

                    <script type="text/javascript">
                        addressInit('area', 'cmbProvince', 'cmbCity', 'cmbArea', '华东地区', '江苏', '苏州市', '张家港市');
                        //addressInit('Select1', 'Select2', 'Select3');
                    </script>
                </div>

                <div>
                    <span>详细地址&nbsp;&nbsp;</span>
                    <input type="text" size="25" placeholder="请输入详细地址" value="" id="detail"/>
                    &nbsp;&nbsp;
                    <span title="预计2021-04-03前发货" style="cursor:pointer;">?</span>
                </div>
                <br>
                <span>请选择版本&nbsp;</span>
                <div class="form-group">
                    <div class="col-md-4">
                        <select class="form-control" id="selectA">
                            <option value="5G全网通 8+256GB" selected="selected">5G全网通 8+256GB</option>
                            <option value="5G全网通 8+512GB">5G全网通 8+512GB</option>
                            <option value="5G全网通 12+512GB">5G全网通 12+512GB</option>
                        </select>
                    </div>
                </div>
                <br>
                <br>
                <span>请选择套餐&nbsp;</span>
                <div class="form-group">
                    <div class="col-md-4">
                        <select class="form-control" id="selectB">
                            <option value="官方标配" selected="selected">官方标配</option>
                            <option value="新年限定礼盒￥199">新年限定礼盒￥199</option>
                            <option value="官方标配+保护壳￥89">官方标配+保护壳￥89</option>
                        </select>
                    </div>

                    <div class="col-md-4 col-md-push-4">
                        <btn class="btn btn-info" onclick="selectAB();save();">确认</btn>
                    </div>
                </div>

                <br>
                <br>

                <div class="form-group">
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;赠品:&nbsp;&nbsp;华为礼品包装服务(礼品封套+明信片)</span>
                </div>

                <div>
                    <br>已选:
                    <input type="text" value="P40pro+陶瓷白 / 5G全网通 8+256GB / 官方标配" size="58"
                           style="border:0;color:red;" id="result" readonly/>
                    &nbsp;&nbsp;
                    <input type="text" value="￥7888.00" size="6"
                           style="font-size:25px;font-weight:bold;color:red;border:0;"
                           id="lastPrice" readonly=""/>
                    <br>
                    <input type="text" value="" id="AllAddress" style="border:0;font-size:14px;color:red;" readonly
                           size="60"/>
                    <script>
                        function selectAB() {
                            var s1 = $('#selectA').val()
                            var s2 = $('#selectB').val()
                            var price = 7888
                            var s1_new
                            var s2_new
                            if (s1 == '5G全网通 8+256GB') {
                                price = parseInt(price) + parseInt(0)
                            } else if (s1 == '5G全网通 8+512GB') {
                                price = parseInt(price) + parseInt(500)
                            } else {
                                price = parseInt(price) + parseInt(800)
                            }
                            if (s2 == '官方标配') {
                                price = parseInt(price) + parseInt(0)
                            } else if (s2 == '新年限定礼盒￥199') {
                                price = parseInt(price) + parseInt(199)
                            } else {
                                price = parseInt(price) + parseInt(89)
                            }
                            $('#result').attr('value', 'P40pro+陶瓷白 / ' + s1 + ' / ' + s2)
                            $('#lastPrice').attr('value', '￥' + price + '.00')

                            var a = $('#area').val()
                            var b = $('#cmbProvince').val()
                            var c = $('#cmbCity').val()
                            var d = $('#cmbArea').val()
                            var e = $('#detail').val()
                            $('#AllAddress').attr('value', '                  ' + a + b + c + d + e)
                        }
                    </script>
                </div>
                <br>
                <div class="form-group" style="margin-left:200px;">

                    <a href = "addOrder">
                        <btn class = "btn btn-primary btn-lg" onclick = "alert('商品加入成功!')">添加购物车</btn>
                    </a>

               </div>

           </form>
       </td>
   </tr>
</table>


<script>
   function save() {
       console.log('save()')
       // 保存 p40的商品编号 以及已选信息和价格
       var p40_id = 'HW124892343'
       var p40_info = $('#result').val()
       var p40_price = $('#lastPrice').val()

       console.log(p40_id)
       console.log(p40_info)
       console.log(p40_price)

       /*有问题  setCookie("ls_1", p40_id);
       setCookie("ls_2", p40_info);
       setCookie("ls_3", p40_price);*/
   }
</script>

</body>
</html>